<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- <component is="user-com"></component> -->
    <component :is="type"></component>
    <ul>
      <li @click="type='home-com'">首页</li>
      <li @click="type='kind-com'">分类</li>
      <li @click="type='cart-com'">购物车</li>
      <li @click="type='user-com'">我的</li>
    </ul>
  </div>
</body>
<template id="home">
  <div>首页</div>
</template>
<template id="kind">
  <div>分类</div>
</template>
<template id="cart">
  <div>购物车</div>
</template>
<template id="user">
  <div>我的</div>
</template>
<script src="lib/vue.js"></script>
<script>
  
  new Vue({
    el: '#app',
    data: {
      type: 'home-com'
    },
    components: {
      'home-com': {
        template: '#home'
      },
      'kind-com': {
        template: '#kind'
      },
      'cart-com': {
        template: '#cart'
      },
      'user-com': {
        template: '#user'
      }
    }
  })
</script>
</html>